<!--
 * @Author: mhb
 * @Date: 2022-04-26 10:17:07
 * @LastEditTime: 2022-09-07 11:02:06
 * @LastEditors: Please set LastEditors
 * @Description:  带班通知维护
 * @FilePath: \cscec-pms-admin\src\views\safetySupervision\basicSetting\noticeMaintenance\index.vue
-->
<template>
  <base-breadcrumb>
    <a-row
      :gutter="12"
      class="page-height"
    >
      <!-- 组织架构 -->
      <a-col
        :span="6"
        class="permission-collapsed"
      >
        <a-card
          :style="{ border: collapsed ? 'none' : 'border: 1px solid #e8e8e8' }"
          class="page-height-tree"
        >
          <title-name title="组织架构"></title-name>
          <PermissionTreeOrganization
            ref="Tree"
            :showPermission="false"
            :collapsed.sync="collapsed"
            @select="handleSelect"
            @init="treeInit"
            levelLimit="1"
          />
        </a-card>
      </a-col>
      <!-- 带班人维护 -->
      <a-col
        :span="18"
        class="permission-collapsed page-height-list-wrapper"
      >
        <a-card
          :bordered="false"
          class="page-height-list"
        >
          <!-- <title-name title="带班人维护"></title-name> -->
          <a-button
            v-btnPermission="'hse_044_add_01'"
            :disabled="!selectOption.orgId"
            icon="plus"
            class="mb12"
            type="primary"
            @click="handleAction(2)"
          >添加带班人</a-button>
          <list-table
            rowKey="id"
            ref="table"
            :columns="columns"
            :request="loadData"
            :isScrollX="false"
            :showPage="false"
          >
            <!-- 操作栏 -->
            <more-button
              slot="actions"
              slot-scope="text, record"
            >
              <a
                v-btnPermission="'hse_044_loo_02'"
                @click="handleAction(0, record)"
              >查看</a>
              <a
                v-btnPermission="'hse_044_edi_03'"
                @click="handleAction(1, record)"
              >编辑</a>
              <a
                v-btnPermission="'hse_044_del_04'"
                @click="handleRemove(record.id)"
              >删除</a>
            </more-button>
          </list-table>
          <!-- 备注 -->
          <div class="mt20">注：通知信息在每月15日，每月25日各推送一次。</div>
        </a-card>
      </a-col>
    </a-row>
    <!-- 带班人弹窗 -->
    <DialogForm
      ref="dialogForm"
      :visible.sync="visible"
      :edit-model="editModel === 0 ? 'V' : 'E'"
      :width="1000"
      :form="form"
      :isEmit="false"
      :api="editModel !== 2 ? api : null"
      :headerTitle="editModel !== 0 ? '带班人与带班次数' : '带班数据统计'"
      :formList="formList"
      :rules="rules"
      @confirm="handleSubmit"
    >
      <!-- 操作为查看时，显示带班数据统计 -->
      <a-table
        v-if="editModel === 0"
        slot="formFooter"
        rowKey="id"
        :columns="columnsTwo"
        :dataSource="loadDataTwo()"
        :pagination="false"
      ></a-table>
    </DialogForm>
  </base-breadcrumb>
</template>

<script>
import api from '@/api/safetySupervision/base/noticeMaintenance' // api
import PermissionTreeOrganization from '@/components/businessComponents/PermissionTreeOrganization' // 带三级权限的组织树
import DialogForm from '@/components/DialogForm' // 弹窗
import MoreButton from '@/components/MoreButton' // 按钮组

export default {
  name: 'a' + Date.now(),
  components: {
    PermissionTreeOrganization,
    DialogForm,
    MoreButton
  },
  data() {
    return {
      api, // api
      form: {}, // 弹窗表单
      visible: false, // 弹窗显隐
      collapsed: false, // 树收缩控件
      selectOption: {}, // 选中树节点业务对象
      columns: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '带班人',
          dataIndex: 'userName',
          width: 150
        },
        {
          title: '领导带班次数（月）',
          dataIndex: 'shouldNum',
          width: 150
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 150,
          scopedSlots: { customRender: 'actions' }
        }
      ], // 列表表头
      columnsTwo: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '月份',
          dataIndex: 'month'
        },
        {
          title: '应带班次数',
          dataIndex: 'shouldNum'
        },
        {
          title: '实际带班次数',
          dataIndex: 'realNum'
        }
      ], // 弹窗表格表头
      loadData: (parameter) => {
        // 当是分公司时，没选中不渲染
        if (!this.selectOption.orgId) {
          return
        }
        const params = {
          ...parameter,
          needCount: false,
          query: {
            // 当时根节点西南公司时，不需要传orgId，西南公司本来就是所有数据，不然后端筛选会很慢
            // orgId: this.selectOption.parentId ? this.selectOption?.orgId : void 0
            orgId: this.selectOption?.orgId
          }
        }
        return api.list(params).then((res) => {
          return res
        })
      }, // 列表请求
      loadDataTwo: () => {
        // 直接取详情接口返回的列表
        return this.$refs.dialogForm?.forms?.detailsVOS || []
      }, // 弹窗表格列表请求
      editModel: 0, // 操作类型：0 新增；1 查看；2 编辑
      rules: {
        userId: [{ required: true, message: '请选择带班人', trigger: 'change' }],
        shouldNum: [{ required: true, message: '请输入领导带班次数（月）', trigger: 'change' }]
      } // 校验规则
    }
  },
  computed: {
    // 弹窗表单配置项
    formList() {
      return [
        {
          type: this.editModel === 2 ? () => import('@/components/Select/ASelectOrgPeople') : 'BaseInput', // 非新增时直接显示名字，就不用组件请求数据渲染了
          keyName: this.editModel === 2 ? 'userId' : 'userName', // 非新增时直接显示名字，就不用组件请求数据渲染了
          hidden: !this.visible, // ASelectOrgPeople组件不支持requestParams参数发生改变时重新请求数据，所以只有每次打开窗口重新渲染组件
          disabled: this.editModel !== 2, // 非新增时不可编辑
          label: '带班人',
          span: 24,
          attrs: {
            mode: 'multiple',
            requestParams: { and: true, orgId: this.selectOption?.orgId, orgType: '2' },
            tooltipAttrs: {
              getPopupContainer: () => this.$refs.dialogForm?.$el // 悬浮框层级有问题，所以把相对容器换成了弹窗
            }
          },
          onSelectChange: (list) => {
            this.$refs.dialogForm.forms.userList = list // 提交表单时需要组装参数id和name，所以需要拿到选择的所有人的业务列表
          },
          fetch: (value) => {
            // 遍历人员，为已存在于列表的人添加disabled属性
            value.forEach((item) => {
              this.$refs.table.tableData.forEach((list) => {
                if (item.userId === list.userId) {
                  item.disabled = true
                }
              })
            })
          }
        },
        {
          type: 'BaseInputNumber',
          keyName: 'shouldNum',
          hidden: !this.editModel, // 查看时隐藏
          label: '领导带班次数（月）',
          precision: 0,
          attrs: {
            min: 1,
            max: 10000
          },
          span: 10
        }
      ]
    }
  },
  methods: {
    /**
     * @description: 树节点选中回调
     * @param {Object} e：选中树节点对象
     */
    handleSelect(e) {
      // 若树节点未选中，则搁浅
      if (!Object.keys(e)?.length) {
        this.selectOption = e
        return
      }
      // 当是分公司岗位，且根节点没有被禁用时，禁用西南公司节点，且默认选中第二级第一个节点
      if (this.$currentPost()?.code === 'BC' && e.level === 0 && !e.disabled) {
        // 禁用西南公司节点
        e.disabled = true
        // 默认选中第二级第一个节点
        this.$refs.Tree.selectedKeys = [e.childTree[0].orgId]
        // 保存选中节点
        this.selectOption = e.childTree[0]
      } else {
        // 保存选中节点
        this.selectOption = e
      }
      // 请求列表
      this.$refs.table.refresh()
    },
    /**
     * @description: 树初始化回调
     * @param {Object} e：树根节点对象
     */
    treeInit(e) {
      // 展开根节点
      this.$refs.Tree.expandedKeys = [e.orgId]
    },
    /**
     * @description: 按钮操作
     * @param {Number} editModel：0 查看；1 编辑；2 新增
     * @param {Object} record：业务对象
     */
    handleAction(editModel, record) {
      // 切换操作模式
      this.editModel = editModel
      // 映射表单
      this.form = record || {}
      // 打开弹窗
      this.visible = true
    },
    /**
     * @description: 删除
     * @param {String} id
     */
    handleRemove(id) {
      this.$confirm({
        title: '提示',
        content: '删除后不可撤销，确定删除？',
        onOk: () => {
          return api.delete(id).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('删除成功！')
              this.$refs.table.refresh()
            }
          })
        }
      })
    },
    /**
     * @description: 提交表单
     * @param {Object} form：表单
     */
    handleSubmit(form) {
      const apiName = ['edit', 'create'][this.editModel - 1] // api
      const params = this.editModel === 1 ? form : [] // 操作状态不一样对应不同的参数集
      // 若是新增则需要组装参数
      if (this.editModel === 2) {
        // 组装表单
        form.userList.forEach((i) => {
          params.push({
            orgId: this.selectOption.orgId,
            orgName: this.selectOption.orgName,
            shouldNum: form.shouldNum,
            userId: i.userId,
            userName: i.name
          })
        })
      }
      // 提交
      api[apiName](params)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('操作成功')
            this.visible = false
            this.$refs.table.refresh()
          }
        })
        .finally(() => {
          // 不论请求是否成功，都要关闭确认按钮loading
          this.$refs.dialogForm.loading = false
        })
    }
  }
}
</script>